<template>
    <section class="paysuccess--container content">
        <div class="success-notice">
            <div class="success-content">
                <img src="/static/success.png" alt />
                <p>出票成功</p>
            </div>
            <p class="quanyi">您已成功开通UME国际影城无限观影权益</p>
            <p class="expire-time">有效期：2019.11.14 至 2020.11.13</p>
        </div>
        <div class="step--container">
            <p class="step-notice">
                两步激活人脸识别
                即可享受无限观影
            </p>
            <ul>
                <li>
                    <img class="setp-img" src="/static/Step1.png" alt />
                    <p>通过活体检测</p>
                    <img class="setp-content-img" src="/static/step1_content.png" alt />
                </li>
                <li>
                    <img class="setp-img" src="/static/Step2.png" alt />
                    <p>录入人脸数据</p>
                    <img class="setp-content-img" src="/static/step2_content.png" alt />
                </li>
            </ul>
        </div>
        <div class="btn--container">
            <label>
                <checkbox color="#e2065d" value="cb" />阅读并同意
                <span>《猩猩电影生物隐私保护协议》</span>
            </label>
            <button type="primary">开始激活</button>
        </div>
    </section>
</template>

<script>
// import footerMenu from "../components/footer";
export default {
    components: {
        // footerMenu
    },
    data() {
        return {};
    },
    onLoad() {},
    methods: {}
};
</script>
<style lang="scss">
.paysuccess--container {
    overflow-y: scroll;
    width: 100vw;
    overflow: hidden;
    min-height: 100vh;
    background-color: #f4f4f4;
    .success-notice {
        width: 100%;
        height: px2vw(200);
        background-color: #d2c398;
        position: relative;
        overflow: hidden;
        .success-content {
            width: px2vw(155);
            height: px2vw(70);
            margin: px2vw(20) auto auto auto;
            background-image: url("");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            img {
                width: px2vw(29);
                height: px2vw(29);
                margin-top: px2vw(20.5);
                float: left;
            }
            p {
                font-size: px2vw($fz26);
                float: left;
                line-height: px2vw(70);
                color: #fff;
                margin-left: px2vw(10);
            }
        }
        > .quanyi {
            text-align: center;
            font-size: px2vw($fz14);
            // float: left;
            // line-height: px2vw(70);
            color: #fff;
            // margin-left: px2vw(10);
        }
        > .expire-time {
            width: px2vw(220);
            height: px2vw(26);
            border: 1px solid #fff;
            text-align: center;
            font-size: px2vw($fz12);
            line-height: px2vw(26);
            border-radius: px2vw(20);
            color: #fff;
            margin: px2vw(10) auto;
        }
    }
    .step--container {
        width: 100%;
        .step-notice {
            width: px2vw(178);
            // height: px2vw(47);
            font-size: px2vw($fz22);
            color: #d2c398;
            text-align: center;
            margin: px2vw(40) auto auto auto;
        }
        ul {
            margin-top: px2vw(40);
            &:after {
                display: block;
                content: "clear";
                clear: both;
                height: 0;
                width: 100%;
                overflow: hidden;
            }
            li {
                width: px2vw(118);
                float: left;
                .setp-img {
                    display: block;
                    width: px2vw(62.5);
                    height: px2vw(24.5);
                    margin: 0 auto;
                }
                .setp-content-img {
                    display: block;
                    width: px2vw(118);
                    height: px2vw(118);
                    margin: px2vw(20) auto px2vw(30) auto;
                }
                p {
                    text-align: center;
                    font-size: px2vw($fz12);
                    color: #d2c398;
                }
                &:nth-child(1) {
                    margin-left: px2vw(42);
                }
                &:nth-child(2) {
                    margin-left: px2vw(53.5);
                }
            }
        }
    }
    .btn--container {
        width: 100%;
        height: px2vw(120);
        background-color: #fff;
        margin-top: px2vw(10);
        padding-bottom: px2vw(10);
        border-top-left-radius: px2vw(15);
        border-top-right-radius: px2vw(15);
        overflow: hidden;
        > label {
            width: 100%;
            display: block;
            text-align: center;
            font-size: px2vw($fz14);
            color: #808080;
            margin-top: px2vw(30);
            span {
                color: #e0514c;
            }
        }
        button {
            width: px2vw(345);
            height: px2vw(50);
            line-height: px2vw(50);
            background-color: #e1c77b;
            border-color: #e1c77b;
            margin: px2vw(10) auto auto auto;
        }
    }
}
</style>